<?php $this->load->view("include/meta"); ?>
    <title>注册-打球吧</title>

    <!-- Bootstrap core CSS -->
    <link href="<?php echo site_url();?>assets/css/bootstrap.css" rel="stylesheet">
    <link href="<?php echo site_url();?>assets/css/common.css" rel="stylesheet">
    <link href="<?php echo site_url();?>assets/css/jquery-impromptu.css" rel="stylesheet">

  </head>

  <body class="gray-bg">

    <!-- Wrap all page content here -->
    <div id="wrap">

    <!-- header start -->
    <?php $this->load->view("include/header"); ?> 
    <!-- header end -->

    <div class="container" id="main">
        <div class="row" id="fillin">
            <div class="col-md-6 col-md-push-6">
                <div class="cool-block">
                <h3>账户注册</h3>

                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-lg-2 control-label">邮箱帐号</label>
                        <div class="col-lg-10">
                            <input type="email" placeholder="邮箱帐号" id="email" name="email" class="form-control" maxLength="50" autocomplete="off" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label" >昵称</label>
                        <div class="col-lg-10">
                            <input type="text" placeholder="2到10个字符噢" id="username" name="username" class="form-control" maxLength="10" autocomplete="off" />
                        </div>
                    </div>                           

                    <div class="form-group">
                        <label class="col-lg-2 control-label">密码</label>
                        <div class="col-lg-10">
                            <input type="password" placeholder="密码大于6位噢" id="password" name="password" class="form-control" maxLength="30" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label">重复密码</label>
                        <div class="col-lg-10">
                            <input type="password" placeholder="重复上面的密码" id="repassword" name="repassword" class="form-control" maxLength="30" />
                        </div>
                    </div>

                    <div class="form-group" id="captcha">
                        <label class="col-lg-2 control-label">验证码</label>
                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="captcha" maxLength="4" autocomplete="off" /> 
                        </div>
                        
                        <div class="col-lg-5">
                        <img width="80" height="30" src="<?php echo site_url('captcha').'/?t='.microtime(true); ?>"> <a id="refresh" href="javascript:;">换张图</a>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-10">
                            <button class="btn btn-info" type="button" id="submit">完成注册</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-10">
                            <a class="login2register" href="<?php echo site_url('login');?>">已有帐号，马上登录</a>
                        </div>
                    </div>
            </form>
            </div>
            </div>

            <div class="col-md-6 col-md-pull-6">
                <h3>
                嗨！快加入我们
                </h3>
                <p class="lineheight-25">
                你是否因为在一个孤单的城市中，而感到孤单寂寞。你是否常常有运动的冲动，却因为没有共同玩耍的小伙伴而只能放弃念头。你是否看到隔壁的萌妹子在愉快的玩耍，却不知如何加入。求组队、求活动是否是你内心深处的呐喊。
                </p>

                <ul class="piclist-4">
                    <li><img src="/assets/images/icons/32/1.png"></li>
                    <li><img src="/assets/images/icons/32/2.png"></li>
                    <li><img src="/assets/images/icons/32/3.png"></li>
                    <li><img src="/assets/images/icons/32/4.png"></li>
                </ul>

                <p class="lineheight-25">
                这里有各种球场高手，切磋球技或者抱高手大腿，任君选择。这里有同样热血的青年，聊技术、聊比赛、聊球队通通奉陪。这里有热爱运动的萌妹子，场边萌妹子场上就是女汉子，个个都耍的有模有样。赶快加入我们吧！大门始终为你打开，快步进入，体验这一切。
                </p>
            </div>

        </div>
    </div>    <!-- end content -->

    </div>    <!-- end wrap -->

    <!-- footer start -->
    <?php $this->load->view("include/footer"); ?> 
    <!-- footer end -->

    <script type="text/javascript" src="<?php echo site_url();?>assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo site_url();?>assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<?php echo site_url();?>assets/js/jquery-impromptu.js"></script>
    <script type="text/javascript">
    $(function(){

        $("div").data("enable",true);
        $('#submit').bind('click',function(){

            if(!checkForm())
            {
                return false;
            }

            if(!$("div").data("enable")) 
            {
                return false;
            }
            else
            {
                $("div").data("enable",false);
                $('#submit').text('提交中...');
            }

            var postData = {
                            email:$('#email').val(),
                            username:$('#username').val(),
                            password:$('#password').val(),
                            repassword:$('#repassword').val(),
                            captcha:$('input[name="captcha"]').val(),
                            };

            $.ajax({
                url: "<?php echo site_url();?>api/register/",
                type: "POST",
                dataType: "json",
                data: postData,
                success: function(data){

                    if(data.error == 0)
                    {
                        $('#submit').text('完成注册');
                        window.location.href="<?php echo site_url('user')?>/?uid="+data.data;
                    }
                    else
                    {
                        $.prompt(data.msg,{
                                buttons: { "确定": true },
                                fitMasker: true
                                });

                        $("div").data("enable",true);
                        $('#submit').text('完成注册');

                        clearForm(data.error);
                    }
                }

            });

        });
        
        $('#refresh').click(function(){
            timestamp = new Date().getTime(); 
            $(this).prev().attr('src','<?php echo site_url("captcha")?>/?t='+timestamp);
        });

        function checkForm()
        {
            var myReg = /^[\.\-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;

            if (!myReg.test($('#email').val())) 
            {
                $.prompt('请填写有效的email帐号',{
                        buttons: { "确定": true },
                        fitMasker: true
                        });
                return false;
            }

            if($('#username').val().length < 2)
            {
                $.prompt('昵称最少两个字符噢',{
                        buttons: { "确定": true },
                        fitMasker: true
                        });
                return false;
            }

            if($('#password').val().length < 6)
            {
                $.prompt('密码需大于六位',{
                        buttons: { "确定": true },
                        fitMasker: true
                        });
                return false;
            }

            if($('#password').val() != $('#repassword').val())
            {
                $.prompt('重复密码不一致',{
                        buttons: { "确定": true },
                        fitMasker: true
                        });
                return false;
            }

            return true;
        }

        function clearForm(code)
        {
            switch(code)
            {
                case 6003:
                    $('#password').val('');
                    $('#repassword').val('');
                    break;
            }

            $('input[name="captcha"]').val('');
            $('#refresh').click();
        }

    });
    </script>
    </body>
</html>
